<template>
	<view class="customer-service u-flex-end" :style="{backgroundImage:`url(${background})`}">
		<view class="qc-code u-flex-col u-flex-end">
			<zero-lazy-load :height="118" imgMode='aspectFill'
				image="https://qn.mtj.cdydsy.com/uploads/spread/20250324/image/0d8eeb4472fe7e76f71a104dca4f0d4b.jpg"
				class="img" showMenuByLongpress></zero-lazy-load>
			<view class="text">长按识别</view>
		</view>
	</view>
</template>

<script setup>
	const background = "https://qn.mtj.cdydsy.com/user_client/new-version/customer-service.png"
</script>

<style lang="scss" scoped>
	.customer-service {
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 198rpx;
		width: 694rpx;
		padding-right: 60rpx;
		margin: 20rpx auto 0;

		.qc-code {
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
			background-color: $base-color-white;

			.img {
				width: 118rpx;
				height: 118rpx;
				display: block;
			}

			.text {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				font-size: 14rpx;
				color: #030303;
				padding: 5rpx;
			}
		}
	}
</style>